<script setup>
	import { onLoad } from '@dcloudio/uni-app'
	import { ref } from 'vue'
	import { gameList } from '@/pages/game/index.js'
	
	const customBar = getApp().globalData.customBar
	const loading = ref(false)
	const waterfall = ref(null)
	const list = ref([])
	const list1 = ref([])
	const list2 = ref([])
	
	function openPage(url) {
		if(url) uni.navigateTo({url})
		else uni.showToast({icon: 'none',title: '敬请期待！'})
	}
	function initList() {
		let data = dealVideoData(gameList || [])
		list.value = data
	}
	function changeList(e) {
		if(e.name === 'list1') list1.value.push(e.value)
		else if(e.name === 'list2') list2.value.push(e.value)
	}
	function dealVideoData(arr) {
		const v = uni.upx2px(750) - 12 - 12 - 8
		let list = arr.map(item => {
			const w = v/2
			const rate = w / item.coverWidth
			item.coverHeight = Math.floor(rate * item.coverHeight)
			return item
		})
		return list
	}
	
	onLoad(() => {
		initList()
	})
</script>

<template>
	<view class="app-container" :style="{paddingTop: customBar + 12 + 'px'}">
		<navbar text="游戏库"></navbar>
		<view class="app-content" v-if="list.length">
			<uv-waterfall ref="waterfall" v-model="list" :add-time="200" :left-gap="24" :right-gap="24" :column-gap="16" @changeList="changeList">
				<template v-slot:list1>
					<!-- 为了磨平部分平台的BUG，必须套一层view -->
					<view>
						<view v-for="item in list1" :key="item.id" class="list-item">
							<view class="list-image" :style="{height: item.coverHeight + 'px'}" @click="openPage(item.page)">
								<uv-image :src="item.cover" width="100%" height="100%"></uv-image>
								<view class="image-info">
									<uv-icon name="heart-fill" color="#F60" size="30"/>
									<text>{{item.hot || 1}}</text>
								</view>
							</view>
							<view class="list-bottom">
								<view class="bottom-title uv-line-2">{{item.name || ''}}</view>
								<view class="bottom-info uv-line-5">{{item.des || ''}}</view>
							</view>
						</view>
					</view>
				</template>
				<template v-slot:list2>
					<!-- 为了磨平部分平台的BUG，必须套一层view -->
					<view>
						<view v-for="item in list2" :key="item.id" class="list-item">
							<view class="list-image" :style="{height: item.height + 'px'}" @click="openPage(item.page)">
								<uv-image :src="item.cover" width="100%" mode="widthFix"></uv-image>
								<view class="image-info">
									<uv-icon name="heart-fill" color="#F60" size="30"/>
									<text>{{item.hot || 1}}</text>
								</view>
							</view>
							<view class="list-bottom">
								<view class="bottom-title uv-line-2">{{item.name || ''}}</view>
								<view class="bottom-info uv-line-5">{{item.des || ''}}</view>
							</view>
						</view>
					</view>
				</template>
			</uv-waterfall>
		</view>
		<view class="empty-box" v-else>
			<empty text="暂无游戏"></empty>
		</view>
	</view>
</template>

<style lang="scss" scoped>
	.app-container{
		.app-content{
			margin-bottom: 24rpx;
			.list-item{
				margin-bottom: 12rpx;
				width: 100%;
				overflow: hidden;
				border-radius: 16rpx;
				background-color: rgba(30, 64, 175, 0.3);
				border: 2rpx solid rgba(59, 130, 246, 0.3);
				.list-image{
					position: relative;
					.image-info{
						position: absolute;
						bottom: 8rpx;
						left: 8rpx;
						z-index: 2;
						color: #BFDBFE;
						font-size: var(--theme-sm);
						line-height: var(--theme-sm-line);
						display: flex;
						align-items: center;
						gap: 8rpx;
					}
				}
				.list-bottom{
					padding: 8rpx;
					.bottom-title{
						font-weight: 600;
						color: #FFFFFF;
						margin-bottom: 8rpx;
					}
					.bottom-info{
						font-size: var(--theme-sm);
						line-height: var(--theme-sm-line);
						color: rgba(96, 165, 250, 0.7);
					}
				}
			}
		}
		.empty-box{
			margin: 0 24rpx;
			padding: 48rpx;
			background-color: rgba(30, 64, 175, 0.3);
			border-radius: 24rpx;
		}
	}
</style>